<template>
    <div class="row list-panel">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <ol class="breadcrumb">
                        <li><a>财务管理</a></li>
                        <li><a>日常收支</a></li>
                    </ol>
                </div>
                <div class="content-wrapper">
                    <el-form :inline="true" :model="queryForm" class="demo-form-inline" label-width="80px" size="small">
                        <el-form-item label="会员姓名">
                            <el-input v-model="queryForm.realName" placeholder="会员姓名"></el-input>
                        </el-form-item>
                        <el-form-item label="交易日期">
                            <el-col :span="11">
                                <el-date-picker type="date" placeholder="开始日期" v-model="queryForm.fromDate"
                                                value-format="yyyy-MM-dd" style="width: 100%;"></el-date-picker>
                            </el-col>
                            <el-col class="line" :span="2" style="text-align: center;font-size: 12px">到</el-col>
                            <el-col :span="11">
                                <el-date-picker type="date" placeholder="结束日期" v-model="queryForm.toDate"
                                                value-format="yyyy-MM-dd" style="width: 100%;"></el-date-picker>
                            </el-col>
                        </el-form-item>
                        <el-form-item label="收支类型">
                            <el-select v-model="queryForm.payType" placeholder="" style="width:177px">
                                <el-option label="全部" value=""></el-option>
                                <el-option label="收入" value="1"></el-option>
                                <el-option label="退款" value="2"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="团名称">
                            <el-input v-model="queryForm.storeName" placeholder="团名称"></el-input>
                        </el-form-item>
                        <el-form-item style="float: right;">
                            <a class="revision-btn" href="javaScript:void(0)" @click="onQuery()">搜 索</a>
                        </el-form-item>
                    </el-form>

                  <!--  <div class="col-sm-12" style="padding: 12px 0px 12px 0px;">
                        <div class="alert alert-info" style="margin-bottom: 0px">
                            <a class="revision-btn" @click="showOrderDetail=true">导出</a>
                        </div>
                    </div>-->

                    <template v-if="data != null">
                        <el-table ref="multipleTable" :data="data.list" :border="true" tooltip-effect="dark" class="list-table"
                            :header-cell-style="{'background-color': '#F5F5F6'}" max-height="600" style="width: 100%">
                            <el-table-column type="selection" width="55" align="center">
                            </el-table-column>
                            <template v-for="columnName in columnNames">
                                <template v-if="columnName.prop === 'payType'">
                                    <el-table-column align="center" :label="columnName.label" :prop="columnName.prop">
                                        <template slot-scope="scope">
                                            <span style="color:#0088CC;" v-if="scope.row.payType === 0">收入</span>
                                            <span style="color:#F00;" v-if="scope.row.payType === 1">退款</span>
                                        </template>
                                    </el-table-column>
                                </template>
                                <template v-else>
                                    <el-table-column :key="columnName.prop" :label="columnName.label" :prop="columnName.prop" align="center">
                                    </el-table-column>
                                </template>
                            </template>
                        </el-table>
                    </template>
                    <el-pagination style="float: right;margin-top: 10px" @size-change="handleSizeChange"
                        @current-change="handleCurrentChange" :current-page.sync="data.currPage" :page-size="data.pageSize"
                        layout="total, prev, pager, next" :total="data.totalCount">
                    </el-pagination>

                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'DailyIncome',
        components: {},
        data() {
            return {
                queryForm: {
                    realName: '',
                    fromDate: '',
                    toDate: '',
                    payType: '',
                    storeName: ''
                },
                columnNames: [{
                    label: '单据编号',
                    prop: 'orderNumber',
                    width: 180
                }, {
                    label: '收支类型',
                    prop: 'payType',
                    width: 100
                }, {
                    label: '金额',
                    prop: 'totalAmount',
                    width: 100
                }, {
                    label: '会员名称',
                    prop: 'realName',
                    width: 120
                }, {
                    label: '交易时间',
                    prop: 'payTime',
                    width: 120
                }, {
                    label: '团名称',
                    prop: 'storeName',
                    width: 120
                }],
                multipleSelection: [],
                data: {},
                query: {
                    page: ''
                }
            }
        },
        mounted: function() {
            this.listFinance({});
        },
        methods: {
            handleSizeChange(val) {
            },
            handleCurrentChange(val) {
                this.query.page = val;
                this.listFinance({});
            },
            onQuery() {
                this.listFinance(this.queryForm);
            },
            // async queryFinace() {
            //     let res = await this.$api.get()
            // },
            async listFinance(queryForm) {
                queryForm.page = this.query.page
                let res = await this.$api.get('/mall/finance/userDetail', queryForm);
                if (res.code === 0) {
                    this.data = res.page;
                } else {
                    this.$message.error(res.msg);
                }
            }
        }
    }
</script>

<style scoped>
    .list-panel .content-wrapper /deep/ .el-form-item__label {
        font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
        color: #666;
        font-size: 12px;
        font-weight: normal;
    }
    .list-table {
        font-size: 12px;
    }
</style>
